@import "src/variables";

.console{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    top: 46px;
    overflow-x: hidden;
    overflow-y: auto;
    background: $default-black;
    margin: 8px;
    padding: 8px -17px 8px 8px;
    border-radius: 2px 2px 5px 2px;
    color: $console-font-color;


    &__message-group{
      margin: 0 4px 8px 4px;
      border-top: solid 1px $console-message-title-color;
      padding: 4px;
      &__header{
        font-weight: bold;
      font-family: 'Inconsolata', monospace;
      font-size: 1.2em;
      margin: 0px 8px;
      color: $default-white

      }
    }
&__message{
    font-family: 'Inconsolata', monospace;
    margin: 8px 0 8px 8px;
    font-size: 1rem;
    &-title{
        color: $console-message-title-color;
        font-weight: bolder;
    }
    .plugin-icon{
      display: inline;
      margin-right: 4px;
      img{
        height: 20px;
      }
    }

}
.blinking-cursor {
    font-weight: 100;
    font-size: 1em;
    color: $console-font-color;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
  }

  @keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: $console-font-color;
      ;
    }
  }

  @-moz-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: $console-font-color;
    }
  }

  @-webkit-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: $console-font-color;
    }
  }

  @-ms-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: $console-font-color;
    }
  }

  @-o-keyframes blink {
    from, to {
      color: transparent;
    }
    50% {
      color: $console-font-color;
    }
  }

}
